<!--
 * @Version: 1.0
 * @Autor:
 * @Date: 2021-03-10 16:57:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-04-09 18:53:55
 * @Description:
-->
<template>
  <el-card class="app-container content_box" shadow="always">
    <div>
      <!-- title -->
      <div class="header_title_box">
        <h2>物流公司管理</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-input v-model="queryParam.name" placeholder="物流公司" class="input-with-select" />
          <el-select
            v-model="queryParam.status"
            size="middle"
            placeholder="请选择状态"
            class="search"
            clearable
            @change="handleSearch"
          >
            <el-option v-for="(item, index) in option" :key="index" :value="item.value" :label="item.label" />
          </el-select>
          <el-button size="middle" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="middle" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        </div>
        <div class="operation_button_box">
          <el-button
            v-action="'dictionary@save'"
            size="middle"
            type="primary"
            icon="el-icon-circle-plus"
            @click="handleCreate()"
          >新增店铺</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-table
          ref="multipleTable"
          :data="data"
          tooltip-effect="dark"
          style="width: 100%"
          border
          fit
          @selection-change="handleSelectMulti"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="物流公司代码" prop="code" />
          <el-table-column align="center" prop="creator_name" label="创建人" />
          <el-table-column align="center" prop="created_at" label="创建时间" />
          <el-table-column align="center" prop="update_name" label="修改人">
            <template slot-scope="scope">
              {{ scope.row.update_name?scope.row.update_name:'-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="updated_at" label="更新时间" />
        </el-table>
        <el-pagination
          v-if="paginate.total > 0"
          class="pagination_box"
          background
          :current-page="paginate.current"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginate.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-------- 回到顶部 ------------>
      <el-backtop :visibility-height="60">
        <i class="el-icon-caret-top" />
      </el-backtop>
      <el-dialog :center="true" :title="title" :visible.sync="formVisible" width="65%" @close="handleCancel">
        <el-form :ref="formName" :model="formFieldsData" :rules="rules" inline class="dialog-form-expand">
          <div class="header_title_box">
            <h2>基本信息</h2>
          </div>
          <el-form-item label="店铺编号" :label-width="formLabelWidth" prop="code">
            <el-input v-model="formFieldsData.code" size="mini" placeholder="请输入店铺编号" autocomplete="off" clearable />
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </el-card>

</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'Template',
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      url: '/shop',
      queryParam: {
        status: '',
        code: '',
        name: '',
        type: ''
      },
      option: [{
        value: 2,
        label: '禁用'
      },
      {
        value: 1,
        label: '启用'
      }
      ],
      loading: false,
      formVisible: false,
      formFieldsData: {
        code: '' // 店铺编号
      },
      formName: 'shops',
      formLabelWidth: '150px',
      rules: {
        code: [{
          required: true,
          message: '请输入店铺编号',
          trigger: 'blur'
        }]
      }
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
